<template>
  <div class="store-edit">
    <div class="v-title">企业首页</div>
    <a-form-model
      :model="model"
      ref="form"
      :rules="rules"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
      @submit="onSubmit"
      :colon="false"
    >
      <a-row>
        <a-col span="10">
          <a-form-model-item label="业务联系电话" prop="cphone">
            <a-input v-model="model.cphone" placeholder="请输入业务联系电话" />
          </a-form-model-item>
        </a-col>
        <a-col span="10">
          <a-form-model-item label="联系人" prop="cname">
            <a-input v-model="model.cname" placeholder="请输入联系人" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col span="10">
          <a-form-model-item label="地址" prop="address">
            <a-input v-model="model.address" placeholder="请输入企业地址" />
          </a-form-model-item>
        </a-col>
        <a-col span="10">
          <a-form-model-item label="网址" prop="web">
            <a-input v-model="model.web" placeholder="请输入网址" />
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row>
        <a-col span="10">
          <a-form-model-item label="主营业务简介">
            <a-textarea
              :rows="5"
              placeholder="主营业务简介，200字以内"
              v-model="model.intro"
            />
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-divider orientation="left">
        图片信息
      </a-divider>

      <a-form-model-item label="Logo" :label-col="{ span: 3 }">
        <Upload v-model="model.logo" text="企业logo" />
      </a-form-model-item>

      <a-form-model-item label="头图" :label-col="{ span: 3 }">
        <Upload v-model="model.topPic" text="企业头图" />
      </a-form-model-item>

      <a-form-model-item label="顶栏轮播图" :label-col="{ span: 3 }">
        <UploadMul v-model="model.user_index_top" text="顶栏轮播图" isObject />
      </a-form-model-item>

      <!-- <a-form-model-item label="资质优势轮播图" :label-col="{ span: 3 }">
        <UploadMul
          v-model="model.user_index_intro"
          text="资质优势轮播图"
          isObject
        />
      </a-form-model-item> -->

      <a-form-model-item label="企业详细说明" :label-col="{ span: 3 }">
        <Editor v-model="model.content" />
      </a-form-model-item>

      <a-form-model-item label=" " :label-col="{ span: 3 }">
        <div class="action-wrapper">
          <a-button style="margin-right: 20px;" size="large">取消</a-button>
          <a-button style="margin-right: 20px;" size="large" @click="preview"
            >预览</a-button
          >
          <a-button type="primary" size="large" htmlType="submit">
            提交审核
          </a-button>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Upload from "@/components/upload/Upload";
import UploadMul from "@/components/upload/UploadMul";
import Editor from "@/components/Editor";
import { updateStore, getStore } from "@/api/account";
import storage from "@/utils/storage";

export default {
  components: {
    Upload,
    Editor,
    UploadMul
  },
  data() {
    return {
      model: {
        cphone: "",
        cname: "",
        address: "",
        web: "",
        intro: "",
        logo: "",
        topPic: "",
        user_index_top: [],
        user_index_intro: [],
        content: "",
        status: 1
      }
    };
  },
  computed: {
    ...mapGetters(["account"]),
    rules() {
      return {};
    }
  },
  mounted() {
    this.getStore();
  },
  methods: {
    async getStore() {
      const res = await getStore({ userId: this.account.ID });

      if (res.data.ID) {
        this.model = res.data;
      }
    },
    async onSubmit(e) {
      e.preventDefault();
      this.model.userId = this.account.ID;
      await updateStore(this.model);
      this.$message.info("提交企业首页审核成功");
      this.$router.push("/user-center");
      this.getStore();
    },
    preview() {
      storage.setItem("STORE", {
        users: {
          name: this.account.name
        },
        ...this.model
      });

      window.open(`${location.href.split("#")[0]}#/company/preview`);
    }
  }
};
</script>

<style lang="less" scoped>
.store-edit {
  background: @white;
  padding: 20px;

  .v-title {
    margin: 0 0 20px;
  }

  .action-wrapper {
    text-align: left;
  }
}
</style>
